<template>
  <ContentWrap>
    <el-form ref="formRef" :model="form" label-width="125">
      <el-row>
        <el-col :span="12">
          <el-form-item label="表单编号">
            <el-input v-model="form.code" :disabled="form.code && formCodeDone" />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="!form.code | !formCodeDone">
          <el-button
            type="primary"
            @click="updateFormCode"
            style="margin-left: 8px"
            :disabled="!form.code"
            >开始填写表单</el-button
          ></el-col
        >
        <el-col v-if="form.code && formCodeDone">
          <el-form-item label="表单标题">
            <el-input v-model="form.title" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.code && formCodeDone">
          <el-form-item label="本次提交编号">
            <el-input v-model="form.formSubimtCode" :disabled="true" /> </el-form-item
        ></el-col>
      </el-row>
    </el-form>
    <FormCreate :rule="rule" @submit="submitForm" v-model="formData" />
  </ContentWrap>
</template>

<script lang="ts" name="FormSubmitForm" setup>
//导入 form-create
import formCreate from '@form-create/element-ui'
import { useRoute } from 'vue-router'
import * as FormApi from '@/api/frontPage/form'
import * as Api from '@/api/frontPage/form/formSubmit'

const message = useMessage() // 消息弹窗

//获取 formCreate 组件
const FormCreate = formCreate.$form()
const form = ref({
  id: '',
  code: '',
  title: '',
  formSubimtCode: ''
})

const formRef = ref()

const formData = ref({})

const rule = ref([])

const formCodeDone = ref(false)

const loading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用

const updateFormCode = () => {
  if (form.value.code) {
    getByCode()
  }
}

import { uuid } from '@/utils'

const getByCode = async () => {
  if (form.value.code) {
    loading.value = true
    try {
      let val = await FormApi.getByCode(form.value.code)

      if (!val) {
        message.error('表单编号错误')
      }

      if (val && val.content) {
        form.value.title = val.title
        form.value.id = val.id
        rule.value = JSON.parse(val.content)
        formCodeDone.value = true
      }
    } catch (t) {
      console.log(t)
    } finally {
      loading.value = false
    }
  }
}

const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  // 提交请求
  loading.value = true
  try {
    const data: any = {}

    data.formId = form.value.id

    data.code = form.value.formSubmitCode

    data.content = JSON.stringify(formData.value)

    await Api.update(data)
    message.success(`表单提交成功`)
    window.location.reload()
  } catch (t) {
    console.log(t)
    loading.value = false
    message.error('提交表单失败')
  } finally {
    loading.value = false
  }
}

const route = useRoute()

/** 初始化 **/
onMounted(() => {
  if (route?.query?.code) {
    form.value.code = route?.query?.code
    getByCode()
  }

  form.value.formSubimtCode = uuid()
})
</script>
